<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="<c:url value="/assets/css/output.css"/>" rel="stylesheet"/>
    <link href="<c:url value="/assets/css/custom-play.fromsko.css"/>" rel="stylesheet"/>
    <link href="<c:url value="/assets/css/video-js.min.css"/>" rel="stylesheet"/>
    <script src="<c:url value="/assets/js/video.min.js"/>"></script>
    <title>Video Player</title>
</head>

<body class="bg-gray-900 text-white select-none">

<div class="h-12 w-full fixed top-0 z-50">
    <div class="flex items-center justify-between">
        <div class="navbar bg-gray-800">
            <div class="flex-1">
                <a class="btn btn-ghost text-xl">${applicationScope.appTitle}</a>
            </div>
            <div class="flex-none neutral-content mr-4">
                <div class="dropdown dropdown-end flex justify-content-between">
                    <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
                        <div class="w-10 rounded-full">
                            <img alt="Tailwind CSS Navbar component" src="<c:url value="/assets/img/form-logo.jpeg"/>"/>
                        </div>
                    </div>
                    <ul tabindex="0"
                        class="menu menu-sm dropdown-content text-black bg-base-200 z-[1] rounded-box mt-2 w-24 p-2 shadow items-center">
                        <li><a href="/admin/index.jsp">后台管理</a></li>
                        <li><a>退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container h-screen flex-col flex mx-auto">
    <div class="player_area mx-auto">
        <video id="video-player" class="video-js w-full h-full absolute inset-0" controls
               poster="<c:url value="/assets/img/play.png"/>" crossorigin="anonymous" playsinline
               data-setup='{"playbackRates": [0.5, 1.0, 1.5, 1.75, 2.0, 2.5, 3.0]}'>
            <source src="https://play.subokk.com/play/NbW3y9Eb/index.m3u8" type="application/x-mpegURL">
            <p class="vjs-no-js">
                To view this video please enable JavaScript, and consider upgrading to a
                web browser that
                <a href="https://videojs.com/html5-video-support/" target="_blank">
                    supports HTML5 video
                </a>
            </p>
        </video>
    </div>

    <!-- Current Play Info -->
    <div class="current_play_info flex justify-between items-start mt-4">
        <div class="play_info_left">
            <h3 class="current_play_title text-lg font-semibold">
                <a href="/filmDetail?link=ID" class="hover:text-orange-500">影视名:</a>
                <span>Episode</span>
            </h3>
            <div class="tags flex flex-wrap items-center mt-2">
                <a href="/filmClassifySearch?Pid=PID&Category=CATEGORY"
                   class="px-2 py-1 bg-purple-700 text-sm rounded-lg mr-2 hover:bg-purple-800">Tag</a>
                <span class="px-2 py-1 bg-gray-700 text-sm rounded-lg mr-2">Class/Tag</span>
                <span class="hidden sm:inline-block px-2 py-1 bg-gray-700 text-sm rounded-lg mr-2">Year</span>
                <span class="hidden sm:inline-block px-2 py-1 bg-gray-700 text-sm rounded-lg">Area</span>
            </div>
        </div>

        <div class="play_info_right flex space-x-1">
            <button class="p-4 rounded-lg border border-gray-700 hover:bg-gray-800">上一集</button>
            <button class="p-4 rounded-lg border border-gray-700 hover:bg-gray-800">下一集</button>
        </div>
    </div>

    <!-- Playlist Section -->
    <div class="mt-4">
        <div class="module-heading flex justify-between items-center">
            <p class="text-xl font-semibold">播放列表</p>
            <div class="flex space-x-2">
                <a href="javascript:void(0);"
                   class="play-tab-item px-3 py-1 bg-gray-800 text-sm rounded-lg hover:bg-gray-700">速播</a>
                <a href="javascript:void(0);"
                   class="play-tab-item px-3 py-1 bg-gray-800 text-sm rounded-lg hover:bg-gray-700">非凡</a>
            </div>
        </div>
        <div class="mt-4">
            <div class="play-list-item">
                <a href="javascript:void(0);"
                   class="play-link px-3 py-1 bg-gray-800 text-sm rounded-lg mr-2 hover:bg-gray-700">第1集</a>
                <a href="javascript:void(0);"
                   class="play-link px-3 py-1 bg-gray-800 text-sm rounded-lg mr-2 hover:bg-gray-700">第2集</a>
            </div>
        </div>
    </div>

    <!-- Related Content Section -->
    <div class="correlation">
        <p class="font-semibold mb-4">相关</p>
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
            <a href="#" class="block p-4 bg-gray-800 rounded-lg hover:bg-gray-700">xx</a>
            <a href="#" class="block p-4 bg-gray-800 rounded-lg hover:bg-gray-700">xxxx</a>
        </div>
    </div>
</div>
</body>
